<template>
  <div class="page-box">
    <TableFilter
      :data="filter"
      v-model="query"
      ref="filter"
      @change="changeFilter"
    >
      <template v-slot:topBtns>
        <el-button type="primary" size="small" @click="$router.back()"
          >返回</el-button
        >
      </template>
    </TableFilter>
    <el-table
      max-height="700"
      @row-dblclick="dblclick"
      v-loading="loading"
      ref="singleTable"
      highlight-current-row
      @current-change="changeRow"
      :header-cell-style="{ background: '#f2f2f2', lineHeight: '50px' }"
      border
      :data="tableData1"
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" width="50"> </el-table-column>
      <el-table-column prop="姓名" label="姓名"> </el-table-column>
      <el-table-column prop="住院号" label="住院号" width="160">
      </el-table-column>
      <el-table-column prop="主管医生" label="主管医生"> </el-table-column>
      <el-table-column prop="病组名称" label="病组名称" width="300">
      </el-table-column>
      <el-table-column prop="病组编码" label="病组编码"> </el-table-column>
      <el-table-column prop="DRG盈亏" label="DRG盈亏"> </el-table-column>
      <el-table-column prop="DRG基金支付" label="DRG基金支付" width="140">
      </el-table-column>
      <el-table-column prop="成本金额" label="成本金额"> </el-table-column>
      <el-table-column prop="标准支付金额" label="标准支付金额" width="160">
      </el-table-column>
      <el-table-column prop="盈亏" label="盈亏"> </el-table-column>
      <el-table-column prop="科室" label="科室" width="140"> </el-table-column>
      <el-table-column prop="结算时间" label="结算时间" width="160">
      </el-table-column>
      <el-table-column prop="结算金额" label="结算金额"> </el-table-column>
      <el-table-column prop="统筹报销" label="统筹报销"> </el-table-column>
      <!-- <el-table-column prop="操作" label="操作" width="140">
        <template slot-scope="{ row }">
          <el-button type="text" @click="openAdd">设置</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="query.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination> -->
    <el-dialog
      :close-on-click-modal="false"
      title="成本项目设置"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <el-form
        :model="formData"
        ref="formRef"
        :rules="rules"
        label-width="130px"
      >
        <el-form-item label="收费项目成本" prop="sfxmbm">
          <el-select
            filterable
            remote
            :remote-method="remoteMethod"
            :loading="loading"
            v-model="formData.sfxmbm"
            placeholder="请选择"
            style="width: 100%"
            @change="changeItem"
          >
            <el-option
              v-for="(v, i) in selectOption"
              :key="i"
              :label="v.mc"
              :value="v.bm"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人力资源成本" prop="fy1">
          <el-input
            type="number"
            v-model="formData.fy1"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="药品成本" prop="fy2">
          <el-input
            type="number"
            v-model="formData.fy2"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="计费耗材成本" prop="fy3">
          <el-input
            type="number"
            v-model="formData.fy3"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="不计费耗材成本" prop="fy4">
          <el-input
            type="number"
            v-model="formData.fy4"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="固定资产折旧成本" prop="fy5">
          <el-input
            type="number"
            v-model="formData.fy5"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="其他成本" prop="fy6">
          <el-input
            type="number"
            v-model="formData.fy6"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
name: "statisInfo";
import TableFilter from "@/components/TableFilter";
import { getCostList, saveCostRef, delCostRef } from "@/api/constService";
import dayjs from "@/utils/dayjs.min.js";
import { UserModule } from "@/store/modules/user";
export default {
  components: {
    TableFilter,
  },
  data() {
    return {
      loading: false,
      UserModule: UserModule,
      loading: false,
      formData: {
        sfxmbm: "",
        fy1: "",
        fy2: "",
        fy3: "",
        fy4: "",
        fy5: "",
        fy6: "",
      },
      selectOption: [],
      rules: {
        sfxmbm: [{ required: true, message: "请选择", trigger: "change" }],
        price: [{ required: true, message: "请输入", trigger: "blur" }],
        num: [{ required: true, message: "请输入", trigger: "blur" }],
        resultNum: [{ required: true, message: "请输入", trigger: "blur" }],
        jsfs: [{ required: true, message: "请选择", trigger: "change" }],
      },
      dialogVisible: false,
      total: 0,
      totalPrice: "",
      query: {
        kssj:
          this.$route.query.kssj ||
          dayjs().subtract(3, "month").format("YYYY-MM-DD"),
        jssj: this.$route.query.jssj || dayjs().format("YYYY-MM-DD"),
        timeType: 0,
        fylb: "",
        lb: 4,
        // page: 1,
        size: 10,
        keys: "",
        bzbm: this.$route.query.bzbm,
      },
      tableData1: [],
      tableData2: [],
      currentRow: null,
      addForm: {},
      fbList: [],
    };
  },
  computed: {
    filter() {
      return {
        date: {
          props: {
            options: [{ label: "时间", value: 0 }],
            isTwoRange: true,
            type: "daterange",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
          },
          keys: ["timeType", "kssj", "jssj"],
        },
        inline: [],
      };
    },
  },
  created() {
    this.getTableData();
    // this.getFbList();
  },
  methods: {
    dblclick(row) {
      console.log(row, "row-");
      this.$router.push(
        `/costManage/statisInfoTwo?jzh=${row.jzh}&kssj=${this.query.kssj}&jssj=${this.query.jssj}`
      );
    },
    handleClose() {
      this.dialogVisible = false;
    },
    openAdd() {
      this.dialogVisible = true;
      this.remoteMethod("");
    },
    changeFilter(e) {
      let data = {
        ...e,
      };
      for (let key in data) {
        if (!data[key] && data[key] != 0) delete data[key];
      }
      this.query = data;

      this.getTableData();
    },
    async getTableData() {
      console.log("获取数据----");
      this.loading = true;
      const res = await getCostList(this.query);
      this.tableData1 = res.data;
      this.loading = false;
      // this.$nextTick(() => {
      //   this.setCurrent(this.tableData1[0]);
      // });
      // this.total = res.data.total;
    },
    //获取筛选条件费别列表
    async getFbList() {
      const params = {
        ...this.query,
        lb: 2,
        keys: "",
        // xmbm: this.currentRow?.his项目编码,
      };
      const res = await getCostList(params);
      this.fbList = res.data.map((v) => ({ label: v.fb, value: v.fb }));
    },
    async getTwoTableData() {
      return; //取消列表2的调用
      const params = {
        ...this.query,
        lb: 2,
        xmbm: this.currentRow?.his项目编码,
      };
      const res = await getCostList(params);
      this.tableData2 = res.data;
      this.totalPrice = res.data.reduce((pre, cur) => {
        pre += cur.cbj;
        return pre;
      }, 0);
    },
    handleSizeChange(val) {
      this.query.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getTableData();
    },
    changeRow(val) {
      this.currentRow = val;
      if (!val) return;
      this.getTwoTableData();
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    async remoteMethod(e) {
      const params = {
        ...this.query,
        keys: e,
        xmbm: this.currentRow?.his项目编码,
      };
      this.loading = true;
      const res = await getCostList(params);
      this.selectOption = res.data.records;
      this.loading = false;
    },
    changeItem(e) {
      console.log(e);
      const item = this.selectOption.find((v) => v.his项目编码 === e);
      this.formData.price = item.售价;
    },
    initFormData() {
      this.formData = {
        sfxmbm: "",
        fy1: "",
        fy2: "",
        fy3: "",
        fy4: "",
        fy5: "",
        fy6: "",
      };
    },
    submit() {
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return;
        console.log("提交", this.UserModule);
        const params = {
          ...this.formData,
          cbid: this.currentRow.cbid,
          // cbxmbm: this.currentRow?.his项目编码,
          // sfxmmc: this.selectOption.find(
          //   v => v.bm === this.formData.sfxmbm
          // )?.mc,
          czry: this.UserModule.user,
        };
        await saveCostRef(params);
        this.$message.success("操作成功");
        this.dialogVisible = false;
        this.getTableData();
        this.initFormData();
        // this.getTwoTableData();
      });
    },
    async delItem(row) {
      const confirm = await this.$confirm("是否确认删除？", "提示", {
        type: "warning",
      });
      if (confirm !== "confirm") return;
      await delCostRef({ id: row.id });
      this.$message.success("操作成功");
      this.getTwoTableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.page-box {
  padding: 20px;
}
::v-deep .el-pagination {
  margin-top: 10px;
  display: flex;
  justify-content: end;
}
.btns-add {
  display: flex;
  justify-content: end;
}
::v-deep .el-table .el-table__cell {
  padding: 2px 0;
}
::v-deep .el-form-item__content {
  display: flex;
}
::v-deep .el-input__inner {
  width: 100%;
}
::v-deep .cell {
  line-height: 40px;
}
</style>
